<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.code{
			background-image: url(securityCodeBackground2.png); 
			font-family: Arial;
			font-style: italic;
			color: black;
			border: 0;
			padding:2px 3px;
			letter-spacing: 3px;
			font-weight: bolder;
			text-align: center;
		}
</style>

		
	</head>
	
		<body>
	<form>
		<center>验证码：
			<input type="text" id="input1" />
			<input type="text" id="checkNode" class="code" style="width: 55px" disabled="disabled" />
			<a href="#" onclick="createCode()">看不清楚，换一张</a><br/>
			<input type="button" name="button1" onclick="validate()" value="确定" />
		</center>
	</form>
	<script type="text/javascript">
		/*在页面加载完成时生成一个随机的验证码*/
		window.onload=function(){
			createCode();
		}
		var code;/*定义一个验证码的全局变量*/
		function createCode(){/* 生成验证码的函数 */
			code="";
			var codeLength=4;
			var checkCode=document.getElementById("checkNode");
			checkCode.value="";
			var selectChar=new Array(1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
			for(var i=0;i<codeLength;i++){
                var charIndex=Math.floor(Math.random()*61);
                console.log(selectChar[charIndex]);
				code += selectChar[charIndex];
			}
			if (code.length != codeLength) {
				createCode();
            }
            console.log(code);
			checkCode.value=code;
		}
 
		function validate() {/* 检验输入的验证码的正确性 */
			var inputCode = document.getElementById("input1").value.toUpperCase();
			var codeToUp=code.toUpperCase();
			if(inputCode.length<=0){
				alert("请输入验证码！");
				return false;
			}
			else if(inputCode != codeToUp){
				alert("验证码输入错误！");
				createCode();
				return false;
			}
			else{
				alert("输入正确，输入的验证码为："+inputCode);
				return true;
			}
		}
	</script>

</body>

	
</html>